<mat-card [ixUiSearch]="searchableElements.elements.globalTwoFA">
  <mat-toolbar-row>
    <h3>{{ 'Global Two Factor Authentication' | translate }}</h3>
    <div *ixWithLoadingState="twoFactorConfig$ as twoFactorAuthConfig" class="actions action-icon">
      <button
        *ixRequiresRoles="requiredRoles"
        id="global-two-factor-auth"
        mat-button
        [ixTest]="['two-factor-auth', 'configure']"
        [ixUiSearch]="searchableElements.elements.configure"
        (click)="onConfigurePressed(twoFactorAuthConfig)"
      >
        {{ 'Configure' | translate }}
      </button>
    </div>
  </mat-toolbar-row>

  <mat-card-content>
    <mat-list [ixUiSearch]="searchableElements.elements.globallyEnabled">
      <mat-list-item>
        <span class="label">{{ 'Global 2FA' | translate }}:</span>
        <span *ixWithLoadingState="twoFactorConfig$ as twoFactorAuthConfig" class="value">
          {{ twoFactorAuthConfig?.enabled ? ('Enabled' | translate) : ('Disabled' | translate) }}
        </span>
      </mat-list-item>

      <mat-list-item
        [matTooltip]="helpText.card.toleranceWindowTooltip | translate"
        [ixUiSearch]="searchableElements.elements.toleranceWindow"
      >
        <span class="label">{{ 'Tolerance Window' | translate }}:</span>
        <span *ixWithLoadingState="twoFactorConfig$ as twoFactorAuthConfig" class="value">
          {{ twoFactorAuthConfig?.window }}
        </span>
      </mat-list-item>

      <mat-list-item [ixUiSearch]="searchableElements.elements.enableForSsh">
        <span class="label">{{ 'Two Factor Authentication for SSH' | translate }}:</span>
        <span *ixWithLoadingState="twoFactorConfig$ as twoFactorAuthConfig" class="value">
          {{ twoFactorAuthConfig?.services?.ssh ? ('Enabled' | translate) : ('Disabled' | translate) }}
        </span>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>
